<template>
  <!-- html -->
  <div class="person">
    <h2>姓名:{{ name }}</h2>
    <h2>年龄:{{ age }}</h2>
    <button @click="showTel">查看联系方式</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeName">修改姓名</button>
  </div>
</template>

<script lang="ts">
// JS或TS 脚本标签
//export default 倒数模块的意思
export default {
  name: 'person',//组件名
  beforeCreate() {//生命周期
    console.log('beforeCreate')
  },

  // 这是vue2中的选项式API 分成好几个区块 很麻烦
  // data() {
  //   return {
  //     name: "张三",
  //     age: 18,
  //     tel: '1388888888'
  //   }
  // },
  // methods: {
  //   //修改姓名
  //   changename() {
  //     this.name = 'zhangsan'
  //   },
  //   //修改年龄
  //   changeAge() {
  //     this.age = 28
  //   },
  //   //显示电话
  //   showTel() {
  //     alert(this.tel)
  //   }
  // }
  setup() {
    //console.log(this) //setup函数中this是undefined,Vue3已经开始弱化this
    //数据 原来是写在data中的，此时name，age，tel都不是响应式的
    let name = '张三'
    let age = 18
    let tel = '1388888888'

    //方法 也就是函数
    function changeName() {
      name = 'zhang-san'//这样修改name，页面时没有变化的
      console.log(name) //name确实该了，但name不是响应式的
    }
    function changeAge() {
      age += 1
    }
    function showTel() {
      alert(tel)
    }
    return { name, age, changeName, changeAge, showTel }
  },
}
</script>

<style scoped>
/* 样式 */
.person {
  background-color: #eee;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>